<script setup>
//  @ts-nocheck
import moment from "moment"
import { useRouter } from "vue-router";
const router = useRouter()
import { ref, onMounted } from 'vue';

//1:获取基础试题列表的函数
import { getListData } from '../../api/question/index'
// 根据id查学科
import { getSubject } from '../../api/subject/index'
//根据目录id查目录
import { getSubjectTag } from '../../api/subject/index'
// 根据题型id查题型
import { getquestionType } from '../../api/question/index'
// 根据id删除基础题库
import { delQuestion } from '../../api/question/index'
// 根据id加入或移除精选题库
import { intoChoice } from '../../api/question/index'


// 处理题型的hook
import { changeQuestionType } from '../../hooks/useQuerstion'
// 处理难度的hook
import { changeDifficulty } from '../../hooks/useQuerstion'

const loading = ref(false)
//总的试题列表
const list = ref([])
// 第几页开始
const page = ref(1)
// 一次几条
const pagesize = ref(5)
// 全部信息
const allPages = ref()
// 当前处于页数
//1.1 请求试题的函数   预留hook formInline
const getListDatahook = async (formInline) => {
    const res = await getListData({
        ...{
            page: page.value,
            pagesize: pagesize.value
        }, ...formInline
    })
    allPages.value = res.data

    list.value = res.data.items
    console.log('总数据', list.value)
    loading.value = true
    // 处理时间
    list.value.map(item => { item.addDate = moment(list.value.addDate).format('YYYY-MM-DD') })
    // 根据id处理学科
    list.value.map(async (item) => {
        const subjectItem = await getSubject(item.subjectID)
        item.subjectID = subjectItem.data.subjectName
    })
    // 处理目录
    list.value.map(async (item) => {
        const subjectTagItem = await getSubjectTag(item.catalogID)
        item.catalogID = subjectTagItem.data.directoryName
    })
    // 处理题型
    list.value.map(async (item) => {
        const getquestionTypeItem = await getquestionType(item.id)
        if (getquestionTypeItem.data.questionType == 1) {
            item.questionType = '单选'
        } else if (getquestionTypeItem.data.questionType == 2) {
            item.questionType = '单选'
        } else {
            item.questionType = '简答'
        }
    })
    //  处理难度
    list.value.map(async (item) => {
        const getquestionTypeItem = await getquestionType(item.id)
        if (getquestionTypeItem.data.difficulty == 1) {
            item.difficulty = '简单'
        } else if (getquestionTypeItem.data.difficulty == 2) {
            item.difficulty = '一般'
        } else {
            item.difficulty = '困难'
        }
    })


    setTimeout(() => {
        loading.value = false
        
    }, 520);
}
//============================ 获取数据
getListDatahook()
// 分页的事件
// 下一页的事件
const getNewlist = () => {
    if (page.value > allPages.value.pages) {
        return ElMessage.error('已经是最后一页了，请看些别的吧')
    }

    getListDatahook()
    console.log('当前页数', page.value)
}
// 上一页的事件
const getOldList = async () => {
    if (page.value < 1) {
        return ElMessage.error('已经是第一页了，请看些别的吧')
    }
    loading.value = true
    await getListDatahook()
    loading.value = false
    console.log('当前页', page.value)
}
// 查询分页事件
const handleCurrentChange = async () => {
    loading.value = true
    await getListDatahook()
    loading.value = false
}

//2.表单的4个按钮
// 弹窗内容
import { ElLoading } from 'element-plus'
//2：点击展示表单
const outerVisible = ref(false)
const showFormList = ref()

// 2.1展示弹窗
const showForm = async (id) => {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(166, 216, 255,0.7)',
    })
    // // 获取点击的数据
    const res = await getquestionType(id)
    showFormList.value = res.data
    console.log('表单数据', showFormList.value)
    // 处理题型
    showFormList.value.questionType = changeQuestionType(showFormList.value.questionType)
    // 处理难度
    showFormList.value.difficulty = changeDifficulty(showFormList.value.difficulty)
    // 处理目录
    const subjectTagItem = await getSubjectTag(showFormList.value.catalogID)
    showFormList.value.catalogID = subjectTagItem.data.directoryName
    // 处理学科
    const subjectItem = await getSubject(showFormList.value.subjectID)
    showFormList.value.subjectID = subjectItem.data.subjectName
    loading.close()
    outerVisible.value = true
}
// 2.2控制视频是否展示
const showVideo = ref(false)
const closebtn = () => {
    showVideo.value = false
    outerVisible.value = false

}
import { ElMessage, ElMessageBox } from 'element-plus'
// 2.2：删除数据
const delShowForm = (id) => {
    ElMessageBox.confirm(
        '你确定要删除吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            delQuestion(id).then(() => {
                loading.value = true
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                getListDatahook()
            }).catch(() => {
                ElMessage('删除失败')
            })
        })
}
// 2.3加入精选题库
const addChoice = async (id) => {
    ElMessageBox.confirm(
        '您确定要加入精选题库吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        loading.value = true
        intoChoice(id, 1).then(() => {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            getListDatahook()
        }).catch(() => {
            ElMessage('添加失败')
        })
    })
}
// 2.4去修改
const goChange = (id) => {
    router.push(`questions/new?id=${id}`)
}


// 3：处理顶部表单
//获取所有的学科名
import { getAllSubjects } from '../../api/subject/index'
// 跟根据学科id查找二级目录
import { twoSubject } from '../../api/subject/index'
// 根据学科id查找标签
import { gettag } from '../../api/subject/index'
// 获取录入人
import { selectuser } from '../../api/user/index'
// 导入城市
import { provinces } from '../../hooks/useCitys'
// 导入地区
import { citys } from '../../hooks/useCitys'
// 3.1表单数据的最终(需要提交的) 表单绑定的
const formInline = ref({
    // 学科
    subjectID: '',
    // 二级目录
    catalogID: '',
    // 标签
    tags: '',
    // 关键字
    keyword: '',
    // 试题类型
    questionType: '',
    // 难度
    difficulty: '',
    // 方向
    direction: '',
    // 录入人
    creatorID: '',
    // 题目备注
    remarks: '',
    // 企业简称
    shortName: '',
    // 城市
    province: '',

    // 地区
    city: ''
})
// 3.3供表单填写的数据
// 学科列表
const subjectlist = ref([])
// 二级目录
const twoSubjectList = ref([])
// 标签
const tagslist = ref([])
// 试题类型
const questionTypelist = ref(['单选', '多选', '简答'])
// 难度
const difficultyList = ref(['简单', '一般', '困难'])
// 方向
const directionlist = ref([
    'o2o',
    '外包服务',
    '企业服务',
    '互联网金融',
    '企业咨询',
    '互联网',
    '电子商务',
    '其他'])
// 录入人
const peopleList = ref([])
// 城市
const city = provinces()
// 地区
const cityItem = ref([])
// 3.1获取的基础题信息详细
onMounted(async () => {
    const res = await getAllSubjects()
    subjectlist.value = res.data
    console.log('学科列表============', subjectlist.value)

    const allpeople = await selectuser()
    console.log('录入人======================================', allpeople)
    peopleList.value = allpeople.data

})
//3.2 学科的值改变的事件(只有选中了学科，二级学科才有zhi)
const changeSubject = async () => {
    console.log('学科ID=================', formInline.value.subjectID)
    // 3.2.1处理二级目录
    if (formInline.value.subjectID) {
        const twores = await twoSubject(formInline.value.subjectID)
        console.log('所有的二级目录', twores)
        twoSubjectList.value = twores.data
    }
    // 3.2.2处理标签
    if (formInline.value.subjectID) {
        const tagsres = await gettag(formInline.value.subjectID)
        console.log('所有的标签', tagsres)
        tagslist.value = tagsres.data
    }
}
// 3.3选择了省的事件
const changeprovince = () => {

    cityItem.value = citys(formInline.value.province)
}
// 用于置空的数据

const topform = ref()
// 搜索
const search = async () => {
    console.log('点击了搜搜')
    await getListDatahook(formInline.value)
}

// 清除
const delformInline = () => {
    getListDatahook()
    formInline.value = {
        // 学科
        subjectID: '',
        // 二级目录
        catalogID: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 城市
        province: '',

        // 地区
        city: ''
    }
    topform.value.resetField()
    console.log('点击了清除')
}
// 新增
const additem = () => {
    router.push('/questions/new')
}
</script>


<template>
    <div style="background-color: white;">
        <div class="topbtn">
            <el-button type="success" class="addbtn" size="small" style="width: 130px;" @click="additem">
                <el-icon :size="15" style="margin-right: 5px;">
                    <Edit />
                </el-icon>
                新增面试题
            </el-button>
        </div>
        <!-- 表单 -->
        <div class="select">
            <div class="selectitem">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="topform">

                    <el-form-item prop="subjectID">
                        <span class="myspan">学科</span>
                        <el-select v-model="formInline.subjectID" placeholder="请选择" clearable @change="changeSubject">
                            <el-option :label="item.label" :value="item.value" v-for="item in subjectlist"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="catalogID">
                        <span class="myspan">二级目录</span>
                        <el-select v-model="formInline.catalogID" placeholder="请选择" clearable>
                            <el-option :label="item.label" :value="item.value" v-for="item in twoSubjectList" />

                        </el-select>
                    </el-form-item>

                    <el-form-item prop="tags">
                        <span class="myspan">标签</span>
                        <el-select v-model="formInline.tags" placeholder="请选择" clearable>
                            <el-option :label="item.label" :value="item.value" v-for="item in tagslist" />

                        </el-select>
                    </el-form-item>

                    <el-form-item prop="keyword">
                        <span class="myspan">关键字</span>
                        <el-input v-model="formInline.keyword" placeholder="请输入" clearable />
                    </el-form-item>

                    <el-form-item prop="questionType">
                        <span class="myspan">试题类型</span>
                        <el-select v-model="formInline.questionType" placeholder="请选择" clearable>
                            <el-option :label="item" :value="index + 1" v-for="(item, index) in questionTypelist" />

                        </el-select>
                    </el-form-item>

                    <el-form-item prop="difficulty">
                        <span class="myspan">难度</span>
                        <el-select v-model="formInline.difficulty" placeholder="请选择" clearable>
                            <el-option :label="item" :value="index + 1" v-for="(item, index) in difficultyList" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <span class="myspan" prop="direction">方向</span>
                        <el-select v-model="formInline.direction" placeholder="请选择" clearable>
                            <el-option :label="item" :value="index + 1" v-for="(item, index) in directionlist" />

                        </el-select>
                    </el-form-item>

                    <el-form-item prop="creatorID">
                        <span class="myspan">输入人</span>
                        <el-select v-model="formInline.creatorID" placeholder="请选择" clearable>
                            <el-option :label="item.username" :value="item.id" v-for="item in peopleList" />

                        </el-select>
                    </el-form-item>

                    <el-form-item prop="remarks">
                        <span class="myspan">题目备注</span>
                        <el-input v-model="formInline.remarks" placeholder="请输入" clearable />
                    </el-form-item>

                    <el-form-item prop="shortName">
                        <span class="myspan">企业简称</span>
                        <el-input v-model="formInline.shortName" placeholder="请输入" clearable />
                    </el-form-item>

                    <el-form-item class="selectwidth" prop="province">
                        <span class="myspan">城市</span>
                        <div class="selectcity">
                            <el-select v-model="formInline.province" placeholder="请选择" clearable style="width: 50%;"
                                @change="changeprovince">
                                <el-option :label="item" :value="item" v-for="item in city" />
                            </el-select>

                            <el-select v-model="formInline.city" placeholder="请选择" clearable style="width: 50%;">
                                <el-option :label="i" :value="i" v-for="i in cityItem" />
                            </el-select>

                        </div>
                    </el-form-item>

                    <el-button size="small" style="width: 60px; margin-left: 170px;" @click="delformInline">清除</el-button>
                    <el-button type="primary" size="small" style="width: 60px; color: white;" @click="search">搜索</el-button>
                </el-form>

            </div>
        </div>
        <!-- 腰线 -->
        <div style="width: 100%; height: 30px; background-color: #f4f4f5;">
            <span class="titlespan" style="margin-left: 15px;">
                <el-icon style="margin-right: 8px;width: 14px;height: 14px;">
                    <InfoFilled />
                </el-icon><span>一共{{ allPages?.counts }}条数据</span></span>
        </div>
        <!-- 底部表单 -->
        <div style="width: 100%;background-color: #ffffff;margin-bottom: 20px;">
            <el-table :data="list" style="width: 100%" v-loading="loading">
                <el-table-column prop="number" label="试题编号" />
                <el-table-column prop="subjectID" label="学科" />
                <el-table-column prop="catalogID" label="目录" />
                <el-table-column prop="questionType" label="题型">
                </el-table-column>
                <el-table-column prop="question" label="题干"><template #default="scope">
                        <p v-html="scope.row.question"> </p>
                    </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间">
                </el-table-column>
                <el-table-column prop="difficulty" label="难度" />
                <el-table-column prop="creator" label="录入人" />
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-icon style="color:#409eff;margin-right: 10px;" size=16 @click="showForm(scope.row.id)">
                            <View />
                        </el-icon>

                        <el-icon style="color: #99ce8f;margin-right: 10px;" size=16 @click="goChange(scope.row.id)">
                            <EditPen />
                        </el-icon>

                        <el-icon style="color: #f78b7a;margin-right: 10px;" size=16 @click="delShowForm(scope.row.id)">
                            <Delete />
                        </el-icon>

                        <el-icon style="color: #edc6ae;margin-right: 10px;" size=16 @click="addChoice(scope.row.id)">
                            <Select />
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" style="float: right; margin-right: 90px; margin-top: 10px;	">
                <el-pagination v-model:current-page="page" v-model:page-size="pagesize" :small="true"
                    pager-count="allPages.pages" :disabled="false" layout="total, prev, pager, next, jumper"
                    :total="allPages?.counts" @next-click="getNewlist" @prev-click="getOldList"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <!-- 弹出框 -->
        <div class="showtitle" style="width: 800px;">
            <el-dialog v-model="outerVisible" title="Outer Dialog">
                <template #header="{ close, titleId, titleClass }">
                    <div class="topTitle" style="background-color: #409eff;width: 100%;">
                        <span>题目预览</span>
                    </div>
                </template>
                <template #default>
                    <span style='font-size: 12px;letter-spacing:1px'>[题型]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width: 120px;'>{{
                            showFormList?.questionType
                        }}</span>

                    <span style='font-size: 12px;letter-spacing:1px'>[编号]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width:120px;'>{{ showFormList?.id
                        }}</span>

                    <span style='font-size: 12px;letter-spacing:1px'>[难度]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width: 120px;'>{{
                            showFormList?.difficulty
                        }}</span>

                    <span style='font-size: 12px;letter-spacing:1px'>[标签]:</span> <span
                        style='letter-spacing:2px;display: inline-block; width: 150px ;font-size: 12px;padding-top: 3px;'>{{
                            showFormList?.tags }}</span>
                    <br>
                    <span style='font-size: 12px;letter-spacing:1px'>[学科]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width: 120px;'>{{
                            showFormList?.subjectID
                        }}</span>

                    <span style='font-size: 12px;letter-spacing:1px'>[目录]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width:120px;'>{{
                            showFormList?.catalogID
                        }}</span>

                    <span style='font-size: 12px;letter-spacing:1px'>[方向]:</span> <span
                        style='letter-spacing:2px;font-size: 12px;display: inline-block; width: 120px;'>{{
                            showFormList?.direction
                        }}</span>
                    <!-- 横线 -->
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="line">
                                    <div></div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <span style='font-size: 12px;letter-spacing:1px'>[题干]:</span>
                    <p style='letter-spacing:2px;font-size: 12px;margin-top: 0; ' v-html="showFormList?.question"></p>

                    <span style='font-size: 12px;letter-spacing:1px;margin-right: 3px;'>{{ showFormList?.questionType
                    }}</span>
                    <span style='font-size: 12px;letter-spacing:1px'>选项:</span>
                    <span style='letter-spacing:2px;font-size: 12px; margin-left: 10px;'>(以下选中的选项为正确答案)</span>
                    <div style="margin-top: 5px;">
                        <el-checkbox :model-value="item.isRight == 1 ? true : false" size="large"
                            v-for="item in showFormList?.options " style="display: block;font-size: 12px;height: 25px;">{{
                                item.code
                            }}:{{ item.title }}</el-checkbox>
                    </div>
                    <!-- 横线 -->
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="line">
                                    <div></div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- 参考答案 -->
                    <span style='font-size: 12px;letter-spacing:1px'>[参考答案]:</span>
                    <el-button type="danger" style="margin-left: 10px; width: 110px;"
                        @click="showVideo = true">视频答案浏览</el-button>
                    <br>
                    <video controls width="450" height="250" v-if="showVideo">
                        <source src="showFormList.videoURL">
                    </video>
                    <!-- 横线 -->
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="line">
                                    <div></div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <span style='font-size: 12px;letter-spacing:1px;'>[答案解析]:</span>
                    <span style='font-size: 12px;letter-spacing:1px;' v-html="showFormList?.answer"></span>
                    <!-- 横线 -->
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="line">
                                    <div></div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    <!-- 题目备注 -->
                    <span style='font-size: 12px;letter-spacing:1px'>[题目备注]:</span>
                    <span style='font-size: 12px;letter-spacing:1px'>{{ showFormList?.remarks }}</span>

                </template>
                <!-- 关闭插槽 -->
                <template #footer>
                    <el-button type="primary" @click="closebtn" style="width: 60px;">关闭</el-button>
                </template>
            </el-dialog>

        </div>
    </div>
</template>



<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

// 顶部
.topbtn {
    width: 100%;
    height: 35px;
    background-color: #ffffff;

    .addbtn {
        margin-top: 5px;
        margin-right: 15px;
        height: 30px;
        float: right;
        background-color: #67c23a;
    }
}

//表单的
.select {
    width: 100%;
    height: 144px;
    background-color: #ffffff;
    padding-top: 10px;

    .selectitem {
        width: 100%;
        margin-left: 10px;
        // background-color: red;
        height: 200px;

    }

    ::v-deep() {
        // .el-form {

        // }
        .myspan {
            text-align: center;
            display: block;
            width: 60px;
            float: right;
            color: #616377;
            font-weight: bold;


        }

        .el-form-item {
            margin: 0;
            margin-bottom: 8px;
            width: 320px;
            margin-left: 5px;

            .el-input {
                width: 260px;
            }

            .selectcity {
                width: 260px;

            }

            .selectcity .el-select .el-select--default {
                width: 120px;
            }

            .selectcity .el-input {
                width: 130px;

                .el-input__suffix {

                    width: 20px;

                    .el-input__suffix-inner {

                        width: 20px;
                    }
                }
            }

        }

    }
}

// 腰线
.titlespan {

    height: 30px;
    line-height: 30px;
    font-size: 13px;
    vertical-align: sub;
}

.showtitle {
    ::v-deep() {
        .el-dialog .el-dialog__header {
            margin: 0;
            padding: 0;

            .el-dialog__headerbtn .el-dialog__close {
                color: white !important;
            }
        }


    }

    .topTitle {
        height: 54px;
        line-height: 59px;
        padding-left: 40px;
        color: #ffffff;
    }

    ::v-deep() {
        .demo-border .line div {
            margin-top: 10px;
            width: 740px;
            height: 0px;
            border-top: 2px solid var(--el-border-color);
        }
    }

}</style>
